<template>
  <div>
    <div class="returnTitle">
      <el-page-header @back="goBack" content="查看权限"></el-page-header>
    </div>
    <div class="center">
      <el-form ref="form" :model="form" label-width="100px" label-position="right">
        <el-form-item label="角色名称：" class="inputBox">
          <el-input v-model="form.role_name" show-word-limit :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="权限说明：" class="inputBox">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit v-model="form.describe" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-radio-group v-model="form.activated">
            <el-radio label="1" :disabled="true">启用</el-radio>
            <el-radio label="0" :disabled="true">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限：" v-if="this.permissionss !== []">
          <el-checkbox v-model="permissionssAll" @change="checkAll()" :disabled="true">全选</el-checkbox>
          <el-tree ref="tree" :data="permissionss" show-checkbox node-key="id" :default-expand-all="true" :expand-on-click-node="false" :default-checked-keys="this.onPermissionss" :props="defaultProps" @check-change="handleCheckChange"> </el-tree>
        </el-form-item>
        <el-form-item class="inputBox">
          <el-button type="primary" @click="submitFn()">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {APIALLPERMISSIONS, APIGETEDITROLESTORE} from '@/common/api.js'
export default {
  data () {
    return {
      form: {
        role_name: '',
        describe: '',
        activated: '',
        permissions: [],
        is_all: ''
      },
      permissionssAll: false,
      onPermissionss: [],
      permissionss: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      index: Number
    }
  },
  created () {
    this.roleList()
    this.editFn()
  },
  methods: {
    roleList () {
      APIALLPERMISSIONS({
        uid: 2
      }).then((res) => {
        if (res.status === 1) {
          this.permissionss = res.data
          this.permissionss.forEach(item => {
            item.disabled = true
            if (item.children.length > 0) {
              item.children.forEach(e => {
                e.disabled = true
                if (e.children !== undefined) {
                  e.children.forEach(n => {
                    n.disabled = true
                    if (n.children !== undefined) {
                      n.children.forEach(m => {
                        m.disabled = true
                        if (m.children !== undefined) {
                          m.children.forEach(a => {
                            a.disabled = true
                          })
                        }
                      })
                    }
                  })
                }
              })
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    editFn () {
      APIGETEDITROLESTORE({
        uid: this.$route.query.id
      }).then((res) => {
        if (res.status === 1) {
          this.form.role_name = res.data.role_name
          this.form.describe = res.data.describe
          this.form.permission = res.data.permission
          this.form.activated = res.data.activated.toString()
          this.onPermissionss = res.data.permission
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goBack () {
      this.$router.push({path: './personnelAccess'})
    },
    submitFn () {
      this.$router.push({path: './personnelAccess'})
    },
    handleCheckChange () {
      let res = this.$refs.tree.getCheckedNodes()
      let arr = []
      res.forEach((item) => {
        arr.push(item.id)
      })
      this.form.permissions = arr
    },
    checkAll () {
      let arr = []
      if (this.permissionssAll === true) {
        this.permissionss.forEach(item => {
          arr.push(item.id)
        })
        this.form.is_all = 1
      } else {
        arr = []
        this.$refs.tree.setCheckedKeys([])
        this.form.is_all = 0
      }
      this.onPermissionss = arr
    }
  }
}
</script>
<style lang="scss">
@import 'src/assets/style/varibles.scss';
.el-tree-node__content {
  width: 250px !important;
  // background-color: darkgoldenrod !important;
  box-sizing: border-box;
}
.is-expanded {
  width: 250px !important;
  // background-color: rebeccapurple !important;
  box-sizing: border-box;
}
.el-tree-node{
  width: 250px !important;
  float: left;
}
</style>
